<!DOCTYPE html>
 <html lang="zh-CN">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>企业满意度数据看板</title>
     <style>
         html,body{margin:0;height:100%;background:#ffffff;display:flex;justify-content:center;align-items:center;font-family:"Microsoft YaHei",sans-serif;}

         /* 整体容器 */
         .board{
             position:relative;
             width:1200px;
             height:1300px;
             transform:scale(.5);
             transform-origin:center;
         }

         /* ① 标题区：1.png + 现场生成的「企业满意度」文字 */
         .header{
             position:absolute;
             left:741px;
             top:48px;
             display:flex;
             align-items:center;
             gap:12px;   /* 横杠与文字间隔 */
             z-index:10;
             background: linear-gradient(90deg, #0B4665 0%, rgb(58, 183, 219) 70%, transparent 100%);
             padding: 8px 16px;
             border-radius: 4px;
         }
         /* 彩色横杠图 */
         .bar-icon{height:30px;background-color:transparent;}
         /* 现场生成文字容器 */
         .title-text{
             font-size:28px;
             font-weight:bold;
             color:#81D9E6;
             font-family:"Microsoft YaHei",sans-serif;
         }

         /* ② 雷达底图：material1.png 直接放下边 */
         .radar{
             position:absolute;
             left:741px;
             top:135px;   /* 标题底留一点间距 */
             width:430px;
             height:224px;
             z-index:3;
         }

         /* ③ 右上角关闭 5 连 */
         .close-group{
             position:absolute;
             left:1093px;
             top:48px;
             display:flex;
             gap:4px;
             z-index:4;
             cursor:pointer;
         }
         .close-group img{width:16px;height:30px;}

         /* 底部线条和4.png容器 */
         .bottom-elements {
             position: absolute;
             left: 48px;
             top: 1029px; /* 与雷达图保持205px的垂直间距 */
             display: flex;
             align-items: center;
             gap: 8px;
             z-index: 5;
             width: 960px;
         }

         /* 线条样式 */
         .line-image {
             height: 12px;
         }

         /* 线条1特殊样式 */
         .line1-special {
             width: 456px;
             height: 1px;
             display: block;
             z-index: 10;
             background-color: rgba(255, 255, 255, 1);
             border: 1px solid rgba(129, 217, 230, 1);
             box-sizing: border-box;
         }

         /* 线条2特殊样式 */
         .line2-special {
             width: 456px;
             height: 1px;
             display: block;
             z-index: 5;
             background-color: rgba(255, 255, 255, 1);
             border: 1px solid rgba(129, 217, 230, 1);
             box-sizing: border-box;
         }

         /* 调整底部元素容器 */
         .line-container {
             display: flex;
             flex-direction: column;
             align-items: flex-start;
             width: 960px;
             gap: 10px;
         }

         /* 4.png样式 */
         .four-image {
             height: 24px;
             width: 24px;
             position: relative;
             z-index: 20;
         }
     </style>
 </head>
 <body>
     <div class="board">
         <!-- 左侧企业满意度数据看板已删除 -->

         <!-- 右侧政策兑付数据看板 -->
         <!-- 标题：3.png 在前，现场文字在后 -->
         <div class="header">
             <img src="3.png" class="bar-icon" alt="color-bar">
             <div class="title-text">政策兑付</div>
         </div>

         <!-- 矩形背景 -->
         <img src="矩形1.png" alt="rectangle-bg" style="position: absolute; left: 741px; top: 106px; width: 459px; height: 263px; z-index: 1;">

         <!-- 雷达底图 -->
         <img src="material4.png" class="radar" alt="radar-bg">

         <!-- 关闭按钮：5个5.png -->
         <div class="close-group" onclick="window.close()">
             <img src="5.png"><img src="5.png"><img src="5.png"><img src="5.png"><img src="5.png">
         </div>

         <!-- 线条2左侧的四个图标（水平排列，更多重叠） -->
         <div style="position: absolute; left: 741px; top: 347px; display: flex; flex-direction: row; gap: 0px; margin: 0; padding: 0; z-index: 6;">
             <img src="4.png" class="four-image" alt="four1" style="margin: 0; padding: 0; display: block;">
               <img src="4.png" class="four-image" alt="four2" style="margin: 0 0 0 -10px; padding: 0; display: block;">
               <img src="4.png" class="four-image" alt="four3" style="margin: 0 0 0 -10px; padding: 0; display: block;">
               <img src="4.png" class="four-image" alt="four4" style="margin: 0 0 0 -10px; padding: 0; display: block;">
         </div>

         <!-- 雷达图下方的线条2 -->
         <img src="线条2.png" class="line2-special" alt="line2" style="position: absolute; left: 833px; top: 355px; width: 361px;">

         <!-- 线条1放在线条2下面，间隔5px -->
         <img src="线条1.png" class="line1-special" alt="line1" style="position: absolute; left: 818px; top: 360px; width: 361px;">

         <!-- 下方服务趋势数据看板 -->
         <!-- 标题：3.png 在前，现场文字在后 -->
         <div class="header" style="left: 741px; top: 420px;">
             <img src="3.png" class="bar-icon" alt="color-bar">
             <div class="title-text">服务趋势</div>
         </div>

         <!-- 矩形背景 -->
         <img src="矩形1.png" alt="rectangle-bg" style="position: absolute; left: 741px; top: 480px; width: 459px; height: 263px; z-index: 1;">

         <!-- 雷达底图 -->
         <img src="material3.png" class="radar" alt="radar-bg" style="left: 741px; top: 530px; width: 456px; height: 195px;">

         <!-- 关闭按钮：5个5.png -->
         <div class="close-group" onclick="window.close()" style="left: 1093px; top: 420px;">
             <img src="5.png"><img src="5.png"><img src="5.png"><img src="5.png"><img src="5.png">
         </div>

         <!-- 线条2左侧的四个图标（水平排列，更多重叠） -->
         <div style="position: absolute; left: 741px; top: 710px; display: flex; flex-direction: row; gap: 0px; margin: 0; padding: 0; z-index: 6;">
             <img src="4.png" class="four-image" alt="four1" style="margin: 0; padding: 0; display: block;">
               <img src="4.png" class="four-image" alt="four2" style="margin: 0 0 0 -10px; padding: 0; display: block;">
               <img src="4.png" class="four-image" alt="four3" style="margin: 0 0 0 -10px; padding: 0; display: block;">
               <img src="4.png" class="four-image" alt="four4" style="margin: 0 0 0 -10px; padding: 0; display: block;">
         </div>

         <!-- 雷达图下方的线条2 -->
         <img src="线条2.png" class="line2-special" alt="line2" style="position: absolute; left: 833px; top: 725px; width: 361px;">

         <!-- 线条1放在线条2下面，间隔5px -->
         <img src="线条1.png" class="line1-special" alt="line1" style="position: absolute; left: 818px; top: 733px; width: 361px;">

         <!-- 底部元素容器（已移除图标） -->
         <div class="bottom-elements">
             <div class="line-container">
                 <!-- 线条1已移至线条2下方 -->
             </div>
         </div>

         <!-- 右侧最下方添加企业满意度数据看板 -->
         <!-- 标题：3.png 在前，现场文字在后 -->
         <div class="header" style="left: 741px; top: 800px;">
             <img src="3.png" class="bar-icon" alt="color-bar">
             <div class="title-text">企业满意度</div>
         </div>

         <!-- 矩形背景 -->
         <img src="矩形1.png" alt="rectangle-bg" style="position: absolute; left: 741px; top: 860px; width: 459px; height: 263px; z-index: 1;">

         <!-- 雷达底图 -->
         <img src="material2.png" class="radar" alt="radar-bg" style="left: 741px; top: 920px; width: 456px; height: 195px;">

         <!-- 关闭按钮：5个5.png -->
         <div class="close-group" onclick="window.close()" style="left: 1093px; top: 800px;">
             <img src="5.png"><img src="5.png"><img src="5.png"><img src="5.png"><img src="5.png">
         </div>

         <!-- 线条2左侧的四个图标（水平排列，更多重叠） -->
         <div style="position: absolute; left: 741px; top: 1090px; display: flex; flex-direction: row; gap: 0px; margin: 0; padding: 0; z-index: 6;">
             <img src="4.png" class="four-image" alt="four1" style="margin: 0; padding: 0; display: block;">
               <img src="4.png" class="four-image" alt="four2" style="margin: 0 0 0 -10px; padding: 0; display: block;">
               <img src="4.png" class="four-image" alt="four3" style="margin: 0 0 0 -10px; padding: 0; display: block;">
               <img src="4.png" class="four-image" alt="four4" style="margin: 0 0 0 -10px; padding: 0; display: block;">
         </div>

         <!-- 雷达图下方的线条2 -->
         <img src="线条2.png" class="line2-special" alt="line2" style="position: absolute; left: 833px; top: 1105px; width: 361px;">

         <!-- 线条1放在线条2下面，间隔5px -->
         <img src="线条1.png" class="line1-special" alt="line1" style="position: absolute; left: 818px; top: 1110px; width: 361px;">
     </div>

     <!-- 移除echarts脚本 -->
 </body>
 </html>